<template>
  <div class="aside">
    <el-menu
      background-color="#00BFFF"
      text-color="#fff"
    >
      <el-submenu :index="String(id)" v-for="(item, id) in menuList" :key="id">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{item.authName}}</span>
        </template>
          <el-menu-item 
          :index="String(id)" 
          v-for="(item, id) in item.children" 
          :key="id" 
          @click="$router.push({ path: item.path })"
          >
            <template>
              <i class="el-icon-edit"></i>
              <span>{{item.authName}}</span>
            </template>            
          </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      menuList: [] // 一级菜单栏目
    }
  },
  methods: {

  },
  created () {
    // 初始化菜单栏中的数据
    this.menuList = this.rights
  },
  computed: {
    ...mapState(['rights']) // 将vuex中state对象映射出来
  }
}
</script>

<style lang="less" scoped>
.nav-title {
  & /deep/ i {
    color: #fff;
  }
  .el-menu-item {
    color: #fff;
  }
}
</style>
